<template>
    <!-- <json-editor-vue class="editor" v-model="data" language="zh-CN" /> -->
    <div>
        <el-table :data="dataList" :span-method="arraySpanMethod" border style="width: 100%">
            <el-table-column label="项目" prop="project"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <div style="display: flex;">
                        <el-button :icon="Plus" size="small" @click="addRow(scope)">添加</el-button>
                        <el-button :icon="Delete" size="small" @click="deleteRow(scope)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="商洽事项">
                <template #default="scope">
                    <el-input v-model="scope.row.remark" type="textarea" :autosize="{ minRows: 2 }"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="担当">
                <template #default="scope">
                    <el-date-picker v-model="scope.row.date" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" />
                </template>
            </el-table-column>
            <el-table-column label="期限">
                <template #default="scope">
                    <el-date-picker v-model="scope.row.date2" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" />
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, createVNode, render, getCurrentInstance } from 'vue'
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue'
import { checkType } from '@/utils/checkType.js'
import Api from '@/api/model/workflow.js'
const dataList = ref([
    { project: '结论', remark: '', date: '', date2: '' },
    { project: '访问目的', remark: '', date: '', date2: '' },
    { project: '商洽内容', remark: '', date: '', date2: '' },
    { project: '情报 ', remark: '', date: '', date2: '' },
    { project: '个人见解 ', remark: '', date: '', date2: '' },
    { project: '其它  ', remark: '', date: '', date2: '' }
])
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    console.log(column)
    const fields = ['project']
    // 当前行的数据
    const cellValue = row[column.property]
    // 判断只合并定义字段的列数据
    if (cellValue && fields.includes(column.property)) {
        const prevRow = dataList.value[rowIndex - 1] //上一行数据
        let nextRow = dataList.value[rowIndex + 1] //下一行数据
        // 当上一行的数据等于当前行数据时，当前行单元格隐藏
        if (prevRow && prevRow[column.property] === cellValue) {
            return { rowspan: 0, colspan: 0 }
        } else {
            // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格
            let countRowspan = 1 //用于合并计数多少单元格
            while (nextRow && nextRow[column.property] === cellValue) {
                nextRow = dataList.value[++countRowspan + rowIndex]
            }
            if (countRowspan > 1) {
                return { rowspan: countRowspan, colspan: 1 }
            }
        }
    }
}
const addRow = (scope) => {
    dataList.value.splice(scope.$index, 0, scope.row)
}
const deleteRow  =(scope)=>{
    dataList.value.splice(scope.$index, 1)
}
</script>
<style scoped>
.body {
    background: #eeeeee;
    position: relative;
    height: 100%;
}

.title {
    background: white;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    padding: 0 10px 10px;
}

.a-avatar {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column !important;
}

.info {
    height: 50px;
    display: flex;
    padding: 0 10px;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
}

.name {
    font-size: 15px;
    color: #5e5e5e;
}

.code {
    font-size: 13px;
    color: rgb(108, 108, 108);
}

.form {
    margin: 15px 0;
    padding: 10px 10px 1px;
    background: white;
    overflow: auto;
    max-height: 380px;
}

.footer {
    height: 60px;
    padding: 15px 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 99;
    background: white;
    border-top: 1px solid #dcdfe6;
    box-shadow: 0 0 15px #dad8d8;
}

.left {
    position: absolute;
    left: 20px;
    top: -5px;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
}

.right {
    position: absolute;
    right: 20px;
}
</style>
